<template>
	<view class="top">
		<view @tap="current=0" :class="[current==0?'active':'']">全部</view>
		<view @tap="current=1" :class="[current==1?'active':'']">验证中</view>
		<view @tap="current=2" :class="[current==2?'active':'']">交易成功</view>
		<view @tap="current=3" :class="[current==3?'active':'']">交易失败</view>
	</view>
	<swiper :current="current" @change="current=$event.detail.current">
		<swiper-item>
			<scroll-view class="list_box safe" direction="vertical" scroll-y>
				<template v-if="list.length==0">
					<image src="/static/icon/none.png"
						style="height: 160rpx;width: 160rpx;margin-top: 200rpx;margin-left: 285rpx;" />
					<view class="none_text">暂时还没有回收订单</view>
				</template>
				<view class="item" v-for="item in list" :key="item.id">
					<view class="type_box">
						<image :src="`/static/order/${item.categoryName}.png`" lazy-load />
						<text style="flex: 1;">{{item.categoryName}}</text>
						<text>{{item.status==1?'验证中':(item.status==2?'交易成功':'交易失败')}}</text>
					</view>
					<view class="info_box">
						<image :src="item.productUrl" lazy-load />
						<text class="limit2 name">{{item.orderName}}</text>
						<text>¥ {{item.faceValue}}</text>
					</view>
					<view class="state" v-if="item.status==1">您的卡券正在检测中，请耐心等待</view>
					<view class="btn_box">
						<!-- #ifdef MP-WEIXIN -->
						<view @click="customerService">联系客服</view>
						<!-- #endif -->
						<navigator :url="'/pages/order_detail/order_detail?id='+item.id">查看详情</navigator>
					</view>
				</view>
			</scroll-view>
		</swiper-item>
		<swiper-item>
			<scroll-view class="list_box safe" direction="vertical" scroll-y>
				<template v-if="list1.length==0">
					<image src="/static/icon/none.png"
						style="height: 160rpx;width: 160rpx;margin-top: 200rpx;margin-left: 285rpx;" />
					<view class="none_text">暂时还没有验证中订单</view>
				</template>
				<view class="item" v-for="item in list1" :key="item.id">
					<view class="type_box">
						<image :src="`/static/order/${item.categoryName}.png`" lazy-load />
						<text style="flex: 1;">{{item.categoryName}}</text>
						<text>{{item.status==1?'验证中':(item.status==2?'交易成功':'交易失败')}}</text>
					</view>
					<view class="info_box">
						<image :src="item.productUrl" lazy-load />
						<text class="limit2 name">{{item.orderName}}</text>
						<text>¥ {{item.faceValue}}</text>
					</view>
					<view class="state" v-if="item.status==1">您的卡券正在检测中，请耐心等待</view>
					<view class="btn_box">
						<!-- #ifdef MP-WEIXIN -->
						<view @click="customerService">联系客服</view>
						<!-- #endif -->
						<navigator :url="'/pages/order_detail/order_detail?id='+item.id">查看详情</navigator>
					</view>
				</view>
			</scroll-view>
		</swiper-item>
		<swiper-item>
			<scroll-view class="list_box safe" direction="vertical" scroll-y>
				<template v-if="list2.length==0">
					<image src="/static/icon/none.png"
						style="height: 160rpx;width: 160rpx;margin-top: 200rpx;margin-left: 285rpx;" />
					<view class="none_text">暂时还没有交易成功订单</view>
				</template>
				<view class="item" v-for="item in list2" :key="item.id">
					<view class="type_box">
						<image :src="`/static/order/${item.categoryName}.png`" lazy-load />
						<text style="flex: 1;">{{item.categoryName}}</text>
						<text>{{item.status==1?'验证中':(item.status==2?'交易成功':'交易失败')}}</text>
					</view>
					<view class="info_box">
						<image :src="item.productUrl" lazy-load />
						<text class="limit2 name">{{item.orderName}}</text>
						<text>¥ {{item.faceValue}}</text>
					</view>
					<view class="state" v-if="item.status==1">您的卡券正在检测中，请耐心等待</view>
					<view class="btn_box">
						<!-- #ifdef MP-WEIXIN -->
						<view @click="customerService">联系客服</view>
						<!-- #endif -->
						<navigator :url="'/pages/order_detail/order_detail?id='+item.id">查看详情</navigator>
					</view>
				</view>
			</scroll-view>
		</swiper-item>
		<swiper-item>
			<scroll-view class="list_box safe" direction="vertical" scroll-y>
				<template v-if="list3.length==0">
					<image src="/static/icon/none.png"
						style="height: 160rpx;width: 160rpx;margin-top: 200rpx;margin-left: 285rpx;" />
					<view class="none_text">暂时还没有交易失败订单</view>
				</template>
				<view class="item" v-for="item in list3" :key="item.id">
					<view class="type_box">
						<image :src="`/static/order/${item.categoryName}.png`" lazy-load />
						<text style="flex: 1;">{{item.categoryName}}</text>
						<text>{{item.status==1?'验证中':(item.status==2?'交易成功':'交易失败')}}</text>
					</view>
					<view class="info_box">
						<image :src="item.productUrl" lazy-load />
						<text class="limit2 name">{{item.orderName}}</text>
						<text>¥ {{item.faceValue}}</text>
					</view>
					<view class="state" v-if="item.status==1">您的卡券正在检测中，请耐心等待</view>
					<view class="btn_box">
						<!-- #ifdef MP-WEIXIN -->
						<view @click="customerService">联系客服</view>
						<!-- #endif -->
						<navigator :url="'/pages/order_detail/order_detail?id='+item.id">查看详情</navigator>
					</view>
				</view>
			</scroll-view>
		</swiper-item>
	</swiper>
	<view class="mask" v-if="showMingpian" @click="showMingpian=false">
	</view>
	<view class="mingpian_box" :style="{'bottom':showMingpian?0:'-700rpx'}">
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="showMingpian=false">
			</image>
		</view>
		<view style="font-size: 35rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;">卡券回收有疑问？</view>
		<view
			style="font-size: 28rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;color: #777777;margin: 20rpx 0 40rpx 0;">
			长按识别二维码，添加专属顾问</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/customer_service.png" show-menu-by-longpress mode="heightFix"
			style="height: 300rpx;" lazy-load />
	</view>
	
	<!-- #ifdef MP-ALIPAY -->
	<contact-button tnt-inst-id="WSS_OvWE" scene="SCE00308723" size="100rpx" />
	<!-- #endif -->
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				showMingpian: false,
				current: 0,
				list: [],
				list1: [],
				list2: [],
				list3: [],
			}
		},
		async onLoad(options) {
			if (options.current) {
				this.current = options.current;
			}
			let {
				result = []
			} = await api.order_list();
			let list1 = [],
				list2 = [],
				list3 = [];
			for (let i of result) {
				if (i.status == 1) {
					list1.push(i);
				} else if (i.status == 2) {
					list2.push(i);
				} else if (i.status == 3) {
					list3.push(i);
				}
			}
			this.list = result;
			this.list1 = list1;
			this.list2 = list2;
			this.list3 = list3;
		},
		methods: {
			customerService() {
				getApp().customerService(this);
			},
		}
	}
</script>

<style>
	.top {
		height: 110rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		color: #62748E;
		background-color: #ffffff;
	}

	.top view {
		height: 100%;
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #62748E;

	}

	.top .active {
		color: #020618;
		text-decoration: underline 6rpx #FFDF20;
		/* 防止下划线避开字母降部 */
		text-decoration-skip-ink: none;
		/* 微调下划线位置使其更贴近文字 */
		text-underline-offset: -6rpx;
	}

	swiper {
		position: absolute;
		top: 110rpx;
		left: 0;
		width: 100%;
		bottom: 0;
		height: calc(100% - 110rpx);
	}

	.list_box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		bottom: 0;
	}

	.item {
		width: 678rpx;
		margin: 36rpx 36rpx 0 36rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 36rpx;
		box-sizing: border-box;
	}

	.item .btn_box {
		height: 64rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 36rpx;
	}

	.item .btn_box view,
	.item .btn_box navigator {
		height: 100%;
		width: 170rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item .btn_box view {
		background-color: #F8FAFC;
	}

	.item .btn_box navigator {
		background-color: #FFDF20;
	}

	.item .state {
		color: #62748E;
		font-size: 24rpx;
		height: 80rpx;
		width: 100%;
		background-color: #F8FAFC;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 36rpx;
	}

	.item .info_box {
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 36rpx;
		gap: 20rpx;
	}

	.item .info_box image {
		height: 80rpx;
		width: 80rpx;
		flex-shrink: 0;
	}

	.item .info_box .name {
		font-size: 28rpx;
		line-height: 40rpx;
		flex: 1;
	}

	.item .info_box text:last-child {
		flex-shrink: 0;
		font-size: 36rpx;
	}

	.item .type_box {
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		gap: 20rpx;
	}

	.item .type_box image {
		height: 40rpx;
		width: 40rpx;
	}
</style>